<template>
	<div class="query-builder">
		<query-group v-model="internalModel" :level="0" @update:modelValue="handleUpdate">
			<template #default="scope">
				<slot name="default" v-bind="scope" />
			</template>
		</query-group>
	</div>
</template>

<script>
	import QueryGroup from './QueryGroup.vue'

	export default {
		name: 'QueryBuilder',
		components: {
			QueryGroup
		},
		props: {
			modelValue: {
				type: Object,
				required: true
			}
		},
		emits: ['update:modelValue'],
		data() {
			return {
				internalModel: this.modelValue
			}
		},
		watch: {
			modelValue(newVal) {
				this.internalModel = newVal
			}
		},
		methods: {
			handleUpdate(newValue) {
				this.internalModel = newValue
				this.$emit('update:modelValue', newValue)
			}
		}
	}
</script>

<style scoped>
	.query-builder {
		font-family: Arial, sans-serif;
		padding: 10px;
	}
</style>
